$(function () {
  let id = location.href.split('=')[1]
  // 根据 Id 获取文章详情数据
  function setArList(res) {
    layui.form.val('formEdit', res.data)
    setTimeout(() => {
      tinymce.activeEditor.selection.setContent(res.data.content)
    }, 300)
    $image.cropper('destroy')  // 销毁旧的裁剪区域
      .attr('src', 'http://api-breakingnews-web.itheima.net' + res.data.cover_img)  // 重新设置图片路径
      .cropper(options)
  }
  // 获取获取文章的列表数据
  getArtiList(renderList1)
  function renderList1(res) {
    let arr = ['<option value="">请选择文章所属分类</option>']
    res.data.forEach(ele => {
      if (ele.Id < 0) return
      arr.push(`
      <option value="${ele.Id}">${ele.name}</option>
      `)
    })
    $('[name=cate_id]').empty().html(arr.join(''))
    // 框架指定的方法渲染
    layui.form.render()
    // 渲染页面数据
    getDetails(id, setArList)
  }

  /**
   * 文本编辑器
   */
  initEditor()

  /**
   * 初始化图片裁剪
   */
  // 1. 初始化图片裁剪器
  let $image = $('#image')
  // 2. 裁剪选项
  let options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  /**
   * 选择封面
   */
  $('#btn-img').on('click', function () {
    $('[name=aa]').click()
  })
  $('[name=aa]').on('change', function () {
    /**
    * 更换图片
    */
    let file = this.files[0]
    let newImgURL = URL.createObjectURL(file)
    $image.cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })

  /**
   * 更改state
   */
  let text = null
  $('#artiOk').on('click', function () {
    text = '已发布'
  })
  $('#artiDraft').on('click', function () {
    text = '草稿'
  })

  /**
   * 提交
   */
  $('#formArti').on('submit', function (e) {
    e.preventDefault()
    let fm = new FormData(this)
    fm.append('state', text)
    $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
      // 得到文件对象后，进行后续的操作
      fm.append('cover_img', blob)
      axios({
        url: '/my/article/edit',
        method: 'POST',
        data: fm
      }).then(({ data: res }) => {
        //成功回调
        if (res.status != 0) {
          return layui.layer.msg(res.message)
        }
        layui.layer.msg('恭喜您，修改文章成功！')
        setTimeout(() => {
          window.parent.document.querySelector('#articleList').click()
        }, 1000)
      }).catch(() => {
        layui.layer.msg('页面出错，请联系管理员')
      })
    })
  })
})


